<template>
  <detail-cell v-if="skus.length > 0" :label="$t('pages.goods.index.xuanze')" :value="value"></detail-cell>
</template>

<script setup>
  import { computed } from 'vue';

  import detailCell from './detail-cell.vue';
  import { useI18n } from 'vue-i18n'
  
  const { t }  = useI18n()

  const props = defineProps({
    modelValue: {
      type: Array,
      default() {
        return [];
      },
    },
    skus: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const value = computed(() => {
    let str = '';
    if (props.modelValue.length > 0) {
      props.modelValue.forEach((item, index) => {
        str += props.skus[index].name + ':' + item + ' ';
      });
    } else {
      str = t('pages.goods.index.xuanzeguige');
    }
    return str;
  });
</script>
